<script setup  lang="ts">
/**
 * 登录页面
 * @lulj3@20250711
 */

import { useRouter } from "vue-router";
import { reactive } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { ElLoading } from 'element-plus'
import { ElMessage } from "element-plus";

const router = useRouter();
const loginForm = reactive({
  // 登录信息
  account: "",
  password: "",
  agree: "",
});
// const handleLogin = async () => { // 处理登录的方法
//   const res = await useFetch('/api/submit', {
//     method: 'POST',
//     body: loginForm
//   })
//   console.log(res);
//   console.log("登录事件被触发")
// }
const handleLogin = async () => {
  // 使用Promise包装setTimeout，使其可以被await
  await new Promise(resolve => setTimeout(resolve, 800));
  try {
    // 使用导航守卫或其他验证逻辑（如果需要）
    router.push("/visual");
  } catch (error) {
    console.error("导航失败:", error);
    ElMessage.error("页面跳转失败，请重试");
  }
};
// do not use same name with ref
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
// 加载动画函数
const createLoading = () => {
  return ElLoading.service({
    lock: true,
    text: '正在登录...',
    background: 'rgba(0, 0, 0, 0.7)',
  });
};

// 优化后的提交处理函数
const onSubmit = async () => {
  const loading = createLoading();
  try {
    // 开始登录处理 - 假设handleLogin返回Promise
    await handleLogin();
    // 登录成功提示
    ElMessage.success('登录成功！');
  } catch (error: any) {
    // 错误处理
    ElMessage.error(error.message || '登录失败，请重试');
  } finally {
    // 无论登录成功或失败都关闭加载动画
    loading.close();
  }
};
</script>

<template>
  <main>
    <div class="left">
      <a href="#"><img src="/sdu.png" /></a>
    </div>
    <div class="right">
      <div class="register">
        <h6>没有账号？<a>前往注册</a></h6>
        <div class="box"></div>
      </div>
      <div class="login">
        <div class="loginBox">
          <header>
            <h1>隧道施工地质灾害诊断系统</h1>
            <h5>Tunnel Construction Geological Hazard Diagnosis System</h5>
            <h4>WELCOME LOGIN</h4>
          </header>
          <div class="loginForm">
            <el-form :model="form" label-width="auto" style="max-width: 600px">
              <el-form-item>
                <el-input v-model="form.name" :prefix-icon="User" />
              </el-form-item>
              <el-form-item>
                <el-input v-model="form.name" :prefix-icon="Lock" />
              </el-form-item>
              <el-form-item>
                <el-checkbox value="Promotion activities" name="type">
                  同意系统《用户协议》与《隐私协议》
                </el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button class="loginBoutton" @click="onSubmit" color="#800000">登 录</el-button>
              </el-form-item>
            </el-form>
          </div>
          <footer>
            <div class="footer-box">
              <a href="#"><img src="/icons8-wechat-500.svg" /></a>
              <a href="#"><img src="/icons8-tencent-qq-96.png"/></a>
              <a href="#"><img src="/icons8-weibo.svg" /></a>
            </div>
          </footer>
        </div>
      </div>
    </div>
  </main>
</template>

<style lang="scss" scoped>
@import url("../../assets/scss/login/index.scss");
@import url("../../assets/scss/login/media-w800.scss");
</style>
